<template>
  <div class="app-top">
    <div class="w-100 bf-gg" style="height: 100%" />
    <div class="position-absolute h-100" style="top: 0">
      <div class="h-100 app-top-top">
        <div style="height: 65.45%; top: 6%" class="position-absolute w-100 flex flex-center">
          <div class="top-one">陇县奶山羊大数据辅助决策分析平台</div>
          <div class="top-center">
            <div>
              <router-link :to="{ name: 'government-decision-making' }" active-class="font-active">政府决策</router-link>
            </div>
            <div>
              <router-link
                :to="{ name: 'enterprise-management' }"
                active-class="font-active"
                :class="{ 'font-active': routerParent ? routerParent.one === 'enterprise-management' : false }"
                >企业经营</router-link
              >
            </div>
            <div>
              <router-link
                :to="{ name: 'expert-service' }"
                active-class="font-active"
                :class="{ 'font-active': routerParent ? routerParent.one === 'expert-service' : false }"
                >专家服务 {{ routerParent }}</router-link
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="children.length" class="itembox-center" style="height: 40%">
      <div class="flex justify-between itembox" style="color: #fff; line-height: 200%">
        <template v-for="item in children">
          <!-- <span v-if="item.hidden" @click="dialogVisible=true">{{ item.meta.title }}</span> -->
          <router-link
            v-if="item.meta"
            :key="item.name"
            active-class="font-active"
            :class="{ 'font-active': $route.name === item.name }"
            :to="{ name: item.name }"
            >{{ item.meta.title }}</router-link
          >
        </template>
      </div>
    </div>
    <el-dialog title="提示" append-to-body :visible.sync="dialogVisible" width="30%">
      <span>敬请期待，正在建设中...</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mRouter from '@/router/modules/m-router'
const arr = ['government-decision-making', 'enterprise-management', 'expert-service']
export default {
  name: 'MyHeader2',
  data() {
    return {
      children: [],
      routerName: '',
      dialogVisible: false
    }
  },
  computed: {
    routerPoor() {
      return [...mRouter]
    },
    routerParent() {
      return this.$route.query.name ? { one: this.$route.query.name.split(',')[0], two: this.$route.query.name.split(',')[1] } : undefined
    }
  },
  created() {
    this.init(this.$route.name, this.$route.query.name ? this.$route.query.name.split(',')[0] : undefined)
  },
  methods: {
    init(name, query) {
      const routerPoor = this.routerPoor
      if (query) {
        this.children = routerPoor.find((item) => item.name === query).children
        routerPoor.find((item) => {
          return item.name === query
        })
        return
      }
      if (name === this.routerName) return
      // if (name === 'government-decision-making') {
      //   this.children = []
      //   return
      // }
      if (this.children.length === 0 || !this.children.some((item) => item.name === name)) {
        let findName = ''
        if (arr.includes(name)) {
          findName = name
        } else {
          findName = this.$route.matched[0].name
        }
        this.children = routerPoor.find((item) => item.name === findName).children
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-top {
  position: relative;
  width: 100%;
  height: 10.2%;
}
.bf-gg {
  background: url(~@/assets/img/bgcBanner.png) no-repeat;
  background-position: 0 0;
  background-size: 100% auto;
}
.app-top-top {
  background: url(~@/assets/img/top-img/top-bg.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.c-28C2FF {
  color: #28c2ff !important;
}
.itembox {
  margin: 0 auto;
  width: 50%;
  height: 100%;
  background: url(~@/assets/img/top-img/children-bg.png) no-repeat;
  background-size: 100% 100%;
  align-items: center;
  padding: 0 8%;
}
.top-one {
  position: absolute;
  top: 10%;
  left: 1%;
  width: 28%;
  font-family: myfont;
  color: rgba(255, 255, 255, 1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(104, 202, 255, 1) 100%);
  color: transparent;
  -webkit-background-clip: text;
  font-size: 32px;
  line-height: 37px;
}
.top-center {
  height: 100%;
  width: 26.7%;
  background: url(~@/assets/img/top-img/top-center.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  padding: 0.55% 3.2% 0;
  div {
    font-size: 22px;
    font-family: myfont;
    color: rgba(238, 249, 255, 1);
    line-height: 29px;
    text-shadow: 0px 1px 12px rgba(6, 80, 184, 0.41);
    cursor: pointer;
  }
}
.font-active {
  color: #3cb5ff;
}
.flex-center {
  justify-content: center;
}
.itembox-center {
  width: 100%;
  position: absolute;
  left: 0;
  top: 78%;
  margin: auto;
  z-index: 999;
}
</style>
